<template>
    <div class="file" :class="{'active' : activeId == apiValue.id}" @mousedown="keyDown($event)"
        @mouseup="keyUp($event)">
        <el-popover placement="right" trigger="hover">
            <div class="folderCount" style="width: 250px;">标题：{{apiValue.title}}</div>
            <div class="folderCount" style="width: 250px;">URL ：{{apiValue.url}}</div>
            <div class="folderCount" style="width: 250px;" :class="typeClass[apiValue.type]">
                类型 ：{{apiValue.type}}
            </div>
            <div class="folderCount" style="width: 250px;" :class="staticClass[apiValue.status]">
                状态 ：{{staticName[apiValue.status]}}
            </div>
            <div class="folderCount" style="width: 250px;">备注 ：{{apiValue.description}}</div>
            <div class="file-box" slot="reference">
                <span class="state" :class="staticClass[apiValue.status]">
                    <i class="el-icon-star-on"></i>
                </span>
                <span class="file-type" :class="typeClass[apiValue.type]">{{apiValue.type}}</span>
                <span class="file-title">{{apiValue.title}}</span>
            </div>
        </el-popover>
        <div class="moveMark" v-if="apiMoveModule">
            <div class="TopMoveMark" @mouseover.stop="mouseover('TopMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="moveActiveObject && TopMoveMark && moveActiveObject.id == apiValue.id"></moveLine>
            </div>
            <div class="BottomMoveMark" @mouseover.stop="mouseover('BottomMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="moveActiveObject && BottomMoveMark && moveActiveObject.id == apiValue.id"></moveLine>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapState } from "vuex";
    import moveLine from "./moveLine"

    export default {
        props: ['apiValue', 'openParentFolder'],
        components: {
            moveLine
        },
        data() {
            return {
                typeClass: {
                    GET: 'text_green',
                    POST: 'text_orange',
                    PUT: 'text_blue',
                    DEL: 'text_red'
                },
                staticName: {
                    0: '设计中',
                    1: '进行中',
                    2: '异常',
                    3: '已完成',
                    4: '已废弃',
                    undefined: '',
                    null: '',
                },
                staticClass: {
                    0: 'text_orange',
                    1: 'text_blue',
                    2: 'text_red',
                    3: 'text_green',
                    4: 'text_gray',
                    undefined: 'text_transparent',
                    null: 'text_transparent',
                },
                active: false,
                TopMoveMark: false,
                BottomMoveMark: false,
            }
        },
        computed: {
            ...mapState("ApiActive", {
                activeId: state => state.activeId,
                tree: state => state.tree,
            }),
            ...mapState("Tree", {
                apiMoveModule: state => state.apiMoveModule,
                moveActiveObject: state => state.moveActiveObject,
            })
        },
        watch: {
            activeId(newValue) {
                if (this.apiValue.id == newValue) {
                    this.openParentFolder();
                    this.treeScroll();
                };
            },
        },
        methods: {
            treeScroll() {
                setTimeout(() => {
                    var elementTop = this.$el.getBoundingClientRect().top;
                    var treePosition = this.tree.getBoundingClientRect()
                    if (elementTop < 131) {
                        this.tree.scrollTo(0, elementTop - 131);
                    } else if (elementTop > treePosition.height) {
                        this.tree.scrollTo(0, elementTop - 131);
                    };
                }, 300);
            },
            mouseover(type) {
                if (this.apiMoveModule) {
                    this.$store.dispatch('Tree/setMoveActiveObject', this.apiValue);
                };
                this.TopMoveMark = false;
                this.BottomMoveMark = false;
                this[type] = true;
                this.$store.dispatch('Tree/setApiMoveType', type);
            },
            mouseout() {
                if (this.apiMoveModule) {
                    this.$store.dispatch('Tree/setMoveActiveObject', null);
                    this.$store.dispatch('Tree/setApiMoveType', null);
                };
            },
            keyDown(event) {
                if (event.button == 0) {
                    let X = event.clientX;
                    let Y = event.clientY;
                    document.onmousemove = (event) => {
                        if (!this.apiMoveModule) {
                            if (Math.abs(X - event.clientX) > 10 || Math.abs(Y - event.clientY) > 10) {
                                this.$store.dispatch('Tree/setApiMoveModule', true);
                            };
                        };
                        this.$store.dispatch('Tree/setMoveObject', {
                            id: this.apiValue.id,
                            x: event.clientX + 30,
                            y: event.clientY + 10,
                            title: this.apiValue.title,
                        });
                    };
                    document.onmouseup = () => {
                        if (this.apiMoveModule) {
                            this.$store.dispatch('Tree/checkMove');
                        };
                        this.$store.dispatch('Tree/setMoveActiveObject', null);
                        this.TopMoveMark = false;
                        this.BottomMoveMark = false;

                        this.$store.dispatch('Tree/setApiMoveModule', false);
                        this.$store.dispatch('Tree/setMoveObject', {
                            id: null,
                            x: -100,
                            y: -100,
                            title: '',
                        });
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                } else if (event.button == 2) {


                };
            },
            keyUp(event) {
                if (!this.apiMoveModule) {
                    this.$store.dispatch('ApiActive/setActiveId', this.apiValue.id)
                };
                if (event.button == 2) {
                    this.$store.dispatch('ApiActive/setRightActive', {
                        MenuObject: null,
                        MenuObjectActiveType: null,
                        RightMenuStatus: false,
                        RightMenuOption: { X: 0, Y: 0 },
                    });
                    this.$nextTick(() => {
                        this.$store.dispatch('ApiActive/setRightActive', {
                            MenuObject: this.apiValue,
                            MenuObjectActiveType: 'Api',
                            RightMenuStatus: true,
                            RightMenuOption: { X: event.clientX, Y: event.clientY },
                        });
                    });
                }
            }
        },
    }
</script>